<!--
 * @Author: zhangyonggui
 * @Date: 2023-10-21 09:52:25
 * @LastEditors: zhangyonggui
 * @LastEditTime: 2024-01-17 16:35:27
 * @Descripttion: 画布工具栏
-->
<!-- 图工具栏 -->
<template>
  <div class="toolbar">
    <el-tooltip
      effect="dark"
      content="放大"
      placement="right"
      :append-to-body="false"
    >
      <i class="vul-icon-amplify" @click="zoomIn"></i>
    </el-tooltip>
    <el-tooltip effect="dark" content="缩小" placement="right">
      <i class="vul-icon-reduce" @click="zoomOut"></i>
    </el-tooltip>
    <el-tooltip effect="dark" content="居中" placement="right">
      <i class="vul-icon-center" @click="fitCenter"></i>
    </el-tooltip>
    <!-- <el-tooltip effect="dark" content="适应屏幕" placement="right">
            <i class="vul-icon-full-screen" @click="fitView"></i>
        </el-tooltip> -->
    <el-tooltip effect="dark" content="全屏" placement="right">
      <i class="vul-icon-full-screen" @click="toFullScreen"></i>
    </el-tooltip>
  </div>
</template>
<script lang="ts" setup>
import { defineProps, onMounted,toRefs } from 'vue';
const props = defineProps({
  graph: {
    type: Object,
    default: () => {
      return {};
    },
  },
  parentRoot: {
      type: Object,
    },
  changeSize:{
    type:Function
  } 
});
const { parentRoot } = toRefs(props);
let changeSize: Function; // 声明 changeSize 变量
onMounted(() => {
  changeSize = props.changeSize!;
  document.addEventListener('fullscreenchange', () => {
      changeSize();
  });
  document.addEventListener('webkitfullscreenchange', () => {
      changeSize();
    
  });
  document.addEventListener('mozfullscreenchange', () => {
      changeSize();
    
  });
  document.addEventListener('msfullscreenchange', () => {
      changeSize();
    
  });
});
// 缩小
const zoomOut = () => {
  const x = props.graph.getWidth() / 2;
  const y = props.graph.getHeight() / 2;
  props.graph.zoom(0.8, { x, y }, true, {
    duration: 200,
    easing: 'easeCubic',
  });
};
// 放大
const zoomIn = () => {
  const x = props.graph.getWidth() / 2;
  const y = props.graph.getHeight() / 2;
  props.graph.zoom(1.2, { x, y }, true, {
    duration: 200,
    easing: 'easeCubic',
  });
};
// 适应视口
const fitView = () => {
  props.graph.fitView(20);
};
// 画布居中
const fitCenter = () => {
  props.graph.fitCenter();
};

// 全屏
const toFullScreen = () => {
  document.fullscreenElement ? document.exitFullscreen() : fullScreen();
};

const fullScreen = () => {
      if (props.parentRoot) {
        const parentRootEl = props.parentRoot;
        if (parentRootEl.requestFullscreen) {
          parentRootEl.requestFullscreen();
        } else if (parentRootEl.mozRequestFullScreen) {
          parentRootEl.mozRequestFullScreen();
        } else if (parentRootEl.webkitRequestFullScreen) {
          parentRootEl.webkitRequestFullScreen();
        } else if (parentRootEl.msRequestFullscreen) {
          parentRootEl.msRequestFullscreen();
        }
      }
    };
const exitFullscreen = () => {
  if (document.exitFullscreen) {
    document.exitFullscreen();
    // 兼容Firefox
  } else if ((document as any).mozCancelFullScreen) {
    (document as any).mozCancelFullScreen();
    // 兼容Chrome, Safari and Opera等
  } else if ((document as any).webkitExitFullscreen) {
    (document as any).webkitExitFullscreen();
    // 兼容IE/Edge
  } else if ((document as any).msExitFullscreen) {
    (document as any).msExitFullscreen();
  }
};
</script>
<style lang="scss" scoped>
.toolbar {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.06);
  i {
    font-size: 18px;
    margin: 5px 8px;
    // color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    &:hover {
      color: #1890ff;
    }
  }
  .layout-opts {
    list-style: none;
    padding: 0;
    text-align: center;
    li {
      cursor: pointer;
      font-size: 14px;
      line-height: 22px;
      color: #3c5471;
      &:hover {
        color: #1890ff;
      }
    }
  }
}
</style>
